import React from 'react';
import { Carousel } from 'antd-mobile';
import Banner1 from '../assets/images/1.jpg'
import Banner2 from '../assets/images/2.jpg'
import Banner3 from '../assets/images/3.jpg'


export default class App extends React.Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                data: [{
                    img: Banner1,
                    tex: '雷军他累了'
                }, {
                    img: Banner2,
                    tex: '越来越多的人喜欢用微信了'
                }, {
                    img: Banner3,
                    tex: '没错就是这个微信'
                }],
            });
        }, 100);
    }
    render() {
        return (
            <Carousel
                autoplay={false}
                infinite
                beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                afterChange={index => console.log('slide to', index)}
            >
                {this.state.data.map(val => (
                    <a
                        style={{ position: "relative" }}
                        key={val}
                        href="###"
                    >
                        {/* 添加文字 */}
                        <span style={{ position: 'absolute', top: '200px', left: '6px', fontSize: '16px', color: '#fff' }}>{val.tex}</span>
                        <img
                            src={val.img}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                        <p style={{ height: '3px' }}></p>
                    </a>
                ))}
            </Carousel>
        );
    }
}

